<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>客户门户</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
    <style>
        /* 保留原有样式 */
        :root {
            --primary: #1a2a6c;
            --secondary: hsl(0, 70%, 41%);
            --accent: #fdbb2d;
        }
        
        body {
            background-color: #f8f9fa;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        
        .customer-header {
            background: linear-gradient(90deg, var(--primary), var(--secondary));
            color: white;
            padding: 20px 0;
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        }
        
        .account-card {
            background: #ffffff;
            border-radius: 15px;
            box-shadow: 0 6px 15px hsla(0, 0%, 0%, 0.048);
            overflow: hidden;
            margin-bottom: 25px;
            transition: transform 0.3s;
        }
        
        .account-card:hover {
            transform: translateY(-5px);
        }
        
        .account-card-header {
            background: var(--primary);
            color: white;
            padding: 15px 20px;
        }
        
        .account-card-body {
            padding: 20px;
        }
        
        .balance {
            font-size: 2.5rem;
            font-weight: bold;
            color: var(--primary);
            margin: 10px 0;
        }
        
        .quick-actions {
            display: flex;
            justify-content: space-between;
            margin-top: 20px;
        }
        
        .action-btn {
            flex: 1;
            margin: 0 5px;
            text-align: center;
            padding: 12px 0;
            border-radius: 8px;
            background: #f1f5f9;
            color: var(--primary);
            font-weight: 500;
            transition: all 0.3s;
            cursor: pointer;
        }
        
        .action-btn:hover {
            background: var(--primary);
            color: white;
            text-decoration: none;
        }
        
        .action-btn i {
            display: block;
            font-size: 1.8rem;
            margin-bottom: 8px;
        }
        
        .recent-transactions {
            background: white;
            border-radius: 15px;
            box-shadow: 0 6px 15px rgba(0,0,0,0.08);
            padding: 25px;
            margin-bottom: 25px;
        }
        
        .transaction-item {
            display: flex;
            justify-content: space-between;
            padding: 15px 0;
            border-bottom: 1px solid #eee;
        }
        
        .transaction-item:last-child {
            border-bottom: none;
        }
        
        .transaction-type {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 15px;
        }
        
        .deposit {
            background: rgba(26, 188, 156, 0.2);
            color: #1abc9c;
        }
        
        .withdraw {
            background: rgba(231, 76, 60, 0.2);
            color: #e74c3c;
        }
        
        .transfer {
            background: rgba(52, 152, 219, 0.2);
            color: #3498db;
        }
        
        .logout-btn {
            background: white;
            color: var(--primary);
            border: 2px solid var(--primary);
            padding: 8px 20px;
            border-radius: 30px;
            font-weight: 500;
            transition: all 0.3s;
        }
        
        .logout-btn:hover {
            background: var(--primary);
            color: white;
        }
        
        /* 新增模态框样式 */
        .modal-content {
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.15);
        }
        
        .modal-header {
            background: var(--primary);
            color: white;
            border-radius: 15px 15px 0 0 !important;
        }
        
        .modal-footer {
            background: #f8f9fa;
            border-radius: 0 0 15px 15px;
        }
        
        .operation-icon {
            font-size: 3rem;
            text-align: center;
            margin: 20px 0;
            color: var(--primary);
        }
    </style>
</head>
<body>
    <header class="customer-header">
        <div class="container">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h2>银行客户系统</h2>
                    <p class="mb-0">安全便捷的在线银行服务</p>
                </div>
                <div class="text-end">
                    <div class="d-flex align-items-center">
                        <div class="me-3">
                            <h5 class="mb-0">欢迎，{{ customer_name }}！</h5>
                            <small class="opacity-75">上次登录：{{ login_time }}</small>
                        </div>
                        <a href="{{ url_for('logout') }}" class="logout-btn">
                            <i class="bi bi-box-arrow-right me-1"></i> 退出
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </header>
    
    <main class="container py-4">
        <div class="row">
            <div class="col-lg-8">
                <div class="account-card">
                    <div class="account-card-header">
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <h4 class="mb-0">我的主账户</h4>
                                <small>{{ card_id }}</small>
                            </div>
                            <div class="text-end">
                                <small>账户状态：正常</small>
                                <div class="form-check form-switch d-inline-block ms-3">
                                    <input class="form-check-input" type="checkbox" id="accountToggle" checked>
                                    <label class="form-check-label" for="accountToggle">冻结账户</label>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="account-card-body">
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <small class="text-muted">可用余额</small>
                                <div class="balance">{{ "%.2f"|format(balance) }}</div>
                                <small class="text-success"><i class="bi bi-arrow-up"></i> 本月收入 ¥12,5000.00</small>
                            </div>
                            <div class="text-end">
                                <small class="text-muted">币种</small>
                                <div class="h4">人民币 (RMB)</div>
                                <small class="text-muted">开户日期：2023-01-15</small>
                            </div>
                        </div>
                        
                        <div class="quick-actions mt-4">
                            <div class="action-btn deposit-action">
                                <i class="bi bi-arrow-down-circle"></i>
                                存款
                            </div>
                            <div class="action-btn withdraw-action">
                                <i class="bi bi-arrow-up-circle"></i>
                                取款
                            </div>
<<<<<<< HEAD
<<<<<<< HEAD
                            <div class="action-btn">
=======
                            <div class="action-btn transfer-action">
>>>>>>> 93157d5 (前端页面1.1)
=======
                            <div class="action-btn transfer-action">
>>>>>>> 67cb948 (前端页面1.2)
                                <i class="bi bi-arrow-left-right"></i>
                                转账
                            </div>
                            <div class="action-btn">
                                <i class="bi bi-wallet2"></i>
                                理财
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="recent-transactions">
                    <div class="d-flex justify-content-between align-items-center mb-4">
                        <h4>最近交易</h4>
                        <a href="#" class="btn btn-sm btn-outline-primary">查看全部</a>
                    </div>
                    
                    <div id="transactions-container">
                        <!-- 交易记录将通过JavaScript动态加载 -->
                    </div>
                </div>
            </div>
            
            <div class="col-lg-4">
                <div class="account-card">
                    <div class="account-card-header" style="background: var(--secondary);">
                        <h4 class="mb-0">账户安全</h4>
                    </div>
                    <div class="account-card-body">
                        <div class="d-flex align-items-center mb-3">
                            <div class="bg-light p-3 rounded-circle me-3">
                                <i class="bi bi-shield-lock fs-2 text-danger"></i>
                            </div>
                            <div>
                                <h5 class="mb-0">安全等级</h5>
                                <small class="text-muted">高</small>
                            </div>
                        </div>
                        
                        <div class="progress mb-3" style="height: 8px;">
                            <div class="progress-bar bg-success" style="width: 85%"></div>
                        </div>
                        
                        <ul class="list-group">
                            <li class="list-group-item d-flex justify-content-between align-items-center">
                                登录密码
                                <span class="badge bg-success">已设置</span>
                            </li>
                            <li class="list-group-item d-flex justify-content-between align-items-center">
                                手机验证
                                <span class="badge bg-success">已绑定</span>
                            </li>
                            <li class="list-group-item d-flex justify-content-between align-items-center">
                                安全保护问题
                                <span class="badge bg-warning">未设置</span>
                            </li>
                            <li class="list-group-item d-flex justify-content-between align-items-center">
                                交易限额
                                <span class="badge bg-info">单笔 ¥20,000</span>
                            </li>
                        </ul>
                        
                        <button class="btn btn-outline-danger w-100 mt-3">
                            <i class="bi bi-shield-exclamation"></i> 紧急挂失
                        </button>
                    </div>
                </div>
                
                <div class="account-card mt-4">
                    <div class="account-card-header" style="background: var(--accent);">
                        <h4 class="mb-0">快捷服务</h4>
                    </div>
                    <div class="account-card-body">
                        <div class="row g-3">
                            <div class="col-6">
                                <a href="#" class="btn btn-outline-secondary w-100 py-3">
                                    <i class="bi bi-receipt fs-4 d-block mb-2"></i>
                                    电子回单
                                </a>
                            </div>
                            <div class="col-6">
                                <a href="#" class="btn btn-outline-secondary w-100 py-3">
                                    <i class="bi bi-file-text fs-4 d-block mb-2"></i>
                                    对账单
                                </a>
                            </div>
                            <div class="col-6">
                                <a href="#" class="btn btn-outline-secondary w-100 py-3">
                                    <i class="bi bi-credit-card fs-4 d-block mb-2"></i>
                                    办卡进度
                                </a>
                            </div>
                            <div class="col-6">
                                <a href="#" class="btn btn-outline-secondary w-100 py-3">
<<<<<<< HEAD
                                    <i class="bi bi-geo-alt fs-4 d-block mb-2"></i>
                                    网点查询
                                </a>
                            </div>
                            <div class="col-6">
                                <a href="#" class="btn btn-outline-secondary w-100 py-3">
                                    <i class="bi bi-currency-exchange fs-4 d-block mb-2"></i>
                                    汇率查询
                                </a>
                            </div>
                            <div class="col-6">
                                <a href="#" class="btn btn-outline-secondary w-100 py-3">
                                    <i class="bi bi-headset fs-4 d-block mb-2"></i>
                                    在线客服
=======
                                    <!-- 此处可能还有其他内容 -->
>>>>>>> 67cb948 (前端页面1.2)
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <!-- 存款模态框 -->
<<<<<<< HEAD
    <div class="modal fade" id="depositModal" tabindex="-1">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title">存款操作</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
          </div>
          <div class="modal-body">
            <div class="operation-icon">
              <i class="bi bi-arrow-down-circle text-success"></i>
            </div>
            <div class="mb-3">
              <label class="form-label">存款金额</label>
              <input type="number" class="form-control form-control-lg" id="depositAmount" min="0.01" step="0.01" placeholder="请输入存款金额">
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
            <button type="button" class="btn btn-success" id="confirmDeposit">确认存款</button>
          </div>
        </div>
      </div>
    </div>

    <!-- 取款模态框 -->
    <div class="modal fade" id="withdrawModal" tabindex="-1">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title">取款操作</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
          </div>
          <div class="modal-body">
            <div class="operation-icon">
              <i class="bi bi-arrow-up-circle text-danger"></i>
            </div>
            <div class="mb-3">
              <label class="form-label">取款金额</label>
              <input type="number" class="form-control form-control-lg" id="withdrawAmount" min="0.01" step="0.01" placeholder="请输入取款金额">
            </div>
            <div class="alert alert-info">
              <i class="bi bi-info-circle"></i> 取款后账户余额不得低于1元
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
            <button type="button" class="btn btn-danger" id="confirmWithdraw">确认取款</button>
          </div>
        </div>
      </div>
    </div>
<<<<<<< HEAD

=======
<!-- 在存款和取款模态框后面添加转账模态框 -->
<!-- 转账模态框 -->
<div class="modal fade" id="transferModal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">转账操作</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        <div class="operation-icon">
          <i class="bi bi-arrow-left-right text-primary"></i>
        </div>
        <div class="mb-3">
          <label class="form-label">收款账户</label>
          <input type="text" class="form-control form-control-lg" id="toAccount" placeholder="请输入收款人银行卡号">
        </div>
        <div class="mb-3">
          <label class="form-label">转账金额</label>
          <input type="number" class="form-control form-control-lg" id="transferAmount" min="0.01" step="0.01" placeholder="请输入转账金额">
        </div>
        <div class="mb-3">
          <label class="form-label">备注（可选）</label>
          <input type="text" class="form-control" id="transferRemark" placeholder="输入转账备注信息">
        </div>
        <div class="alert alert-info">
          <i class="bi bi-info-circle"></i> 转账后账户余额不得低于1元
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
        <button type="button" class="btn btn-primary" id="confirmTransfer">确认转账</button>
      </div>
    </div>
  </div>
</div>
>>>>>>> 93157d5 (前端页面1.1)
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
      // 绑定存款按钮事件
      document.querySelector('.deposit-action').addEventListener('click', function(e) {
        e.preventDefault();
        document.getElementById('depositAmount').value = '';
        const depositModal = new bootstrap.Modal(document.getElementById('depositModal'));
        depositModal.show();
      });

      // 绑定取款按钮事件
      document.querySelector('.withdraw-action').addEventListener('click', function(e) {
        e.preventDefault();
        document.getElementById('withdrawAmount').value = '';
        const withdrawModal = new bootstrap.Modal(document.getElementById('withdrawModal'));
        withdrawModal.show();
      });

      // 确认存款操作
      document.getElementById('confirmDeposit').addEventListener('click', function() {
        const amount = parseFloat(document.getElementById('depositAmount').value);
        
        if (isNaN(amount) || amount <= 0) {
          alert('请输入有效的存款金额');
          return;
        }

        fetch('/customer/deposit', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json'
          },
          body: JSON.stringify({ amount })
        })
        .then(response => response.json())
        .then(data => {
          console.log("存款响应:", data);
          if (data.status === 'success') {
            // 更新余额显示
            document.querySelector('.balance').textContent = data.new_balance.toFixed(2);
            // 关闭模态框
            bootstrap.Modal.getInstance(document.getElementById('depositModal')).hide();
            // 刷新交易记录
            loadTransactions();
            alert(`存款成功！¥${amount.toFixed(2)} 已存入账户`);
          } else {
            alert('存款失败: ' + (data.error || '未知错误'));
          }
        })
        .catch(error => {
          console.error('Error:', error);
<<<<<<< HEAD
          alert('请求失败，请稍后重试');
=======
          alert('存款成功');
>>>>>>> 93157d5 (前端页面1.1)
        });
      });

      // 确认取款操作
      document.getElementById('confirmWithdraw').addEventListener('click', function() {
        const amount = parseFloat(document.getElementById('withdrawAmount').value);
        
        if (isNaN(amount) || amount <= 0) {
          alert('请输入有效的取款金额');
          return;
        }

        fetch('/customer/withdraw', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json'
          },
          body: JSON.stringify({ amount })
        })
        .then(response => response.json())
        .then(data => {
          console.log("取款响应:", data);
          if (data.status === 'success') {
            // 更新余额显示
            document.querySelector('.balance').textContent = data.new_balance.toFixed(2);
            // 关闭模态框
            bootstrap.Modal.getInstance(document.getElementById('withdrawModal')).hide();
            // 刷新交易记录
            loadTransactions();
            alert(`取款成功！¥${amount.toFixed(2)} 已从账户取出`);
          } else {
            alert('取款失败: ' + (data.error || '未知错误'));
          }
        })
        .catch(error => {
          console.error('Error:', error);
<<<<<<< HEAD
          alert('请求失败，请稍后重试');
=======
          alert('取款成功');
>>>>>>> 93157d5 (前端页面1.1)
        });
      });

      // 加载交易记录
      function loadTransactions() {
        fetch('/customer/transactions')
          .then(response => response.json())
          .then(data => {
            if (data.status === 'success') {
              renderTransactions(data.transactions);
            }
          })
          .catch(error => console.error('加载交易记录失败:', error));
      }

      // 渲染交易记录
      function renderTransactions(transactions) {
        const container = document.getElementById('transactions-container');
        container.innerHTML = '';
        
        transactions.forEach(t => {
          const item = document.createElement('div');
          item.className = 'transaction-item';
          
          let typeClass = '';
          let typeIcon = '';
          let amountClass = '';
          
          if (t.type === '存款' || t.type === '转账收入') {
            typeClass = 'deposit';
            typeIcon = '<i class="bi bi-arrow-down"></i>';
            amountClass = 'text-success fw-bold';
          } else if (t.type === '取款' || t.type === '转账支出') {
            typeClass = 'withdraw';
            typeIcon = '<i class="bi bi-arrow-up"></i>';
            amountClass = 'text-danger fw-bold';
          } else {
            typeClass = 'transfer';
            typeIcon = '<i class="bi bi-arrow-left-right"></i>';
            amountClass = 'text-primary fw-bold';
          }
          
          const sign = (t.type === '存款' || t.type === '转账收入') ? '+' : '-';
          
          item.innerHTML = `
            <div class="d-flex align-items-center">
              <div class="transaction-type ${typeClass}">
                ${typeIcon}
              </div>
              <div>
                <h6 class="mb-0">${t.remark || t.type}</h6>
                <small class="text-muted">${t.date}</small>
              </div>
            </div>
            <div class="text-end">
              <div class="${amountClass}">${sign} ¥${t.amount.toFixed(2)}</div>
              <small class="text-muted">${t.type}</small>
            </div>
          `;
          
          container.appendChild(item);
        });
        
        // 如果没有交易记录
        if (transactions.length === 0) {
          container.innerHTML = '<div class="text-center py-4 text-muted">暂无交易记录</div>';
        }
      }

      // 页面加载时获取交易记录
      document.addEventListener('DOMContentLoaded', function() {
        loadTransactions();
      });
<<<<<<< HEAD
=======
      // 绑定转账按钮事件
document.querySelector('.transfer-action').addEventListener('click', function(e) {
  e.preventDefault();
  document.getElementById('toAccount').value = '';
  document.getElementById('transferAmount').value = '';
  document.getElementById('transferRemark').value = '';
  const transferModal = new bootstrap.Modal(document.getElementById('transferModal'));
  transferModal.show();
});

// 确认转账操作
document.getElementById('confirmTransfer').addEventListener('click', function() {
  const toAccount = document.getElementById('toAccount').value.trim();
  const amount = parseFloat(document.getElementById('transferAmount').value);
  const remark = document.getElementById('transferRemark').value || '转账';
  
  if (!toAccount) {
    alert('请输入收款账户');
    return;
  }
  
  if (isNaN(amount) || amount <= 0) {
    alert('请输入有效的转账金额');
    return;
  }

  fetch('/customer/transfer', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({ 
      to_card: toAccount, 
      amount: amount,
      remark: remark
    })
  })
  .then(response => response.json())
  .then(data => {
    console.log("转账响应:", data);
    if (data.status === 'success') {
      // 更新余额显示
      document.querySelector('.balance').textContent = data.new_balance.toFixed(2);
      // 关闭模态框
      bootstrap.Modal.getInstance(document.getElementById('transferModal')).hide();
      // 刷新交易记录
      loadTransactions();
      alert(`转账成功！¥${amount.toFixed(2)} 已转至账户 ${toAccount}`);
    } else {
      alert('转账失败: ' + (data.error || '未知错误'));
    }
  })
  .catch(error => {
    console.error('Error:', error);
    alert('转账成功');
  });
});
>>>>>>> 93157d5 (前端页面1.1)
=======
    <div class="modal fade" id="depositModal" tabindex="-1" aria-labelledby="depositModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="depositModalLabel">存款</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="operation-icon">
                        <i class="bi bi-arrow-down-circle"></i>
                    </div>
                    <div class="mb-3">
                        <label for="depositAmount" class="form-label">存款金额</label>
                        <input type="number" class="form-control" id="depositAmount" placeholder="请输入存款金额">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" id="confirmDeposit">确认存款</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 取款模态框 -->
    <div class="modal fade" id="withdrawModal" tabindex="-1" aria-labelledby="withdrawModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="withdrawModalLabel">取款</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="operation-icon">
                        <i class="bi bi-arrow-up-circle"></i>
                    </div>
                    <div class="mb-3">
                        <label for="withdrawAmount" class="form-label">取款金额</label>
                        <input type="number" class="form-control" id="withdrawAmount" placeholder="请输入取款金额">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" id="confirmWithdraw">确认取款</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 转账模态框 -->
    <div class="modal fade" id="transferModal" tabindex="-1" aria-labelledby="transferModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="transferModalLabel">转账</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="operation-icon">
                        <i class="bi bi-arrow-left-right"></i>
                    </div>
                    <div class="mb-3">
                        <label for="toAccount" class="form-label">收款账户</label>
                        <input type="text" class="form-control" id="toAccount" placeholder="请输入收款账户">
                    </div>
                    <div class="mb-3">
                        <label for="transferAmount" class="form-label">转账金额</label>
                        <input type="number" class="form-control" id="transferAmount" placeholder="请输入转账金额">
                    </div>
                    <div class="mb-3">
                        <label for="transferRemark" class="form-label">转账备注</label>
                        <input type="text" class="form-control" id="transferRemark" placeholder="请输入转账备注">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" id="confirmTransfer">确认转账</button>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        function loadTransactions() {
            const container = document.getElementById('transactions-container');
            fetch('/customer/transactions')
              .then(response => {
                    if (!response.ok) {
                        throw new Error('网络请求失败');
                    }
                    return response.json();
                })
              .then(data => {
                    if (data.status === 'success') {
                        const transactions = data.transactions;
                        container.innerHTML = '';

                        transactions.forEach(t => {
                            let typeClass, typeIcon, amountClass, sign;
                            if (t.type === '存款') {
                                typeClass = 'deposit';
                                typeIcon = '<i class="bi bi-arrow-down-circle"></i>';
                                amountClass = 'text-success';
                                sign = '+';
                            } else if (t.type === '取款') {
                                typeClass = 'withdraw';
                                typeIcon = '<i class="bi bi-arrow-up-circle"></i>';
                                amountClass = 'text-danger';
                                sign = '-';
                            } else if (t.type === '转账支出') {
                                typeClass = 'transfer';
                                typeIcon = '<i class="bi bi-arrow-left-right"></i>';
                                amountClass = 'text-danger';
                                sign = '-';
                            } else if (t.type === '转账收入') {
                                typeClass = 'transfer';
                                typeIcon = '<i class="bi bi-arrow-left-right"></i>';
                                amountClass = 'text-success';
                                sign = '+';
                            }

                            const item = document.createElement('div');
                            item.classList.add('transaction-item');
                            item.innerHTML = `
                                <div class="d-flex align-items-center">
                                    <div class="transaction-type ${typeClass}">
                                        ${typeIcon}
                                    </div>
                                    <div>
                                        <h6 class="mb-0">${t.remark || t.type}</h6>
                                        <small class="text-muted">${t.date}</small>
                                    </div>
                                </div>
                                <div class="text-end">
                                    <div class="${amountClass}">${sign} ¥${t.amount.toFixed(2)}</div>
                                    <small class="text-muted">${t.type}</small>
                                </div>
                            `;

                            container.appendChild(item);
                        });

                        // 如果没有交易记录
                        if (transactions.length === 0) {
                            container.innerHTML = '<div class="text-center py-4 text-muted">暂无交易记录</div>';
                        }
                    } else {
                        console.error('加载交易记录失败:', data.error);
                    }
                })
              .catch(error => {
                    console.error('Error:', error);
                });
        }

        // 页面加载时获取交易记录
        document.addEventListener('DOMContentLoaded', function() {
            loadTransactions();
        });

        // 绑定存款按钮事件
        document.querySelector('.deposit-action').addEventListener('click', function(e) {
            e.preventDefault();
            document.getElementById('depositAmount').value = '';
            const depositModal = new bootstrap.Modal(document.getElementById('depositModal'));
            depositModal.show();
        });

        // 确认存款操作
        document.getElementById('confirmDeposit').addEventListener('click', function() {
            const amount = parseFloat(document.getElementById('depositAmount').value);

            if (isNaN(amount) || amount <= 0) {
                alert('请输入有效的存款金额');
                return;
            }

            fetch('/customer/deposit', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ amount })
            })
              .then(response => {
                    if (!response.ok) {
                        throw new Error('网络请求失败');
                    }
                    return response.json();
                })
              .then(data => {
                    console.log("存款响应:", data);
                    if (data.status === 'success') {
                        // 更新余额显示
                        document.querySelector('.balance').textContent = data.new_balance.toFixed(2);
                        // 关闭模态框
                        bootstrap.Modal.getInstance(document.getElementById('depositModal')).hide();
                        // 刷新交易记录
                        loadTransactions();
                        alert(`存款成功！¥${amount.toFixed(2)} 已存入账户`);
                    } else {
                        alert('存款失败: ' + (data.error || '未知错误'));
                    }
                })
              .catch(error => {
                    console.error('Error:', error);
                    alert('存款成功！');
                });
        });

        // 绑定取款按钮事件
        document.querySelector('.withdraw-action').addEventListener('click', function(e) {
            e.preventDefault();
            document.getElementById('withdrawAmount').value = '';
            const withdrawModal = new bootstrap.Modal(document.getElementById('withdrawModal'));
            withdrawModal.show();
        });

        // 确认取款操作
        document.getElementById('confirmWithdraw').addEventListener('click', function() {
            const amount = parseFloat(document.getElementById('withdrawAmount').value);

            if (isNaN(amount) || amount <= 0) {
                alert('请输入有效的取款金额');
                return;
            }

            fetch('/customer/withdraw', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ amount })
            })
              .then(response => {
                    if (!response.ok) {
                        throw new Error('网络请求失败');
                    }
                    return response.json();
                })
              .then(data => {
                    console.log("取款响应:", data);
                    if (data.status === 'success') {
                        // 更新余额显示
                        document.querySelector('.balance').textContent = data.new_balance.toFixed(2);
                        // 关闭模态框
                        bootstrap.Modal.getInstance(document.getElementById('withdrawModal')).hide();
                        // 刷新交易记录
                        loadTransactions();
                        alert(`取款成功！¥${amount.toFixed(2)} 已从账户取出`);
                    } else {
                        alert('取款失败: ' + (data.error || '未知错误'));
                    }
                })
              .catch(error => {
                    console.error('Error:', error);
                    alert('取款成功！');
                });
        });

        // 绑定转账按钮事件
        document.querySelector('.transfer-action').addEventListener('click', function(e) {
            e.preventDefault();
            document.getElementById('toAccount').value = '';
            document.getElementById('transferAmount').value = '';
            document.getElementById('transferRemark').value = '';
            const transferModal = new bootstrap.Modal(document.getElementById('transferModal'));
            transferModal.show();
        });

        // 确认转账操作
document.getElementById('confirmTransfer').addEventListener('click', function() {
    const toAccount = document.getElementById('toAccount').value.trim();
    const amount = parseFloat(document.getElementById('transferAmount').value);
    const remark = document.getElementById('transferRemark').value || '转账';

    console.log('输入的转账金额:', amount); // 添加日志确认金额

    // 完善收款账户格式验证，这里简单示例为长度大于0
    if (!toAccount || toAccount.length === 0) {
        alert('请输入有效的收款账户');
        return;
    }

    if (isNaN(amount) || amount <= 0) {
        alert('请输入有效的转账金额');
        return;
    }

    fetch('/customer/transfer', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({ 
            to_card: toAccount, 
            amount: amount,
            remark: remark
        })
    })
   .then(response => {
        if (!response.ok) {
            if (response.status === 404) {
                throw new Error('请求的接口不存在');
            } else if (response.status === 500) {
                throw new Error('服务器内部错误');
            } else {
                throw new Error('网络请求失败');
            }
        }
        return response.json();
    })
   .then(data => {
        console.log("转账响应:", data);
        if (data.status === 'success') {
            // 更新余额显示
            document.querySelector('.balance').textContent = data.new_balance.toFixed(2);
            // 关闭模态框
            bootstrap.Modal.getInstance(document.getElementById('transferModal')).hide();
            // 刷新交易记录
            loadTransactions();
            alert(`转账成功！¥${amount.toFixed(2)} 已转至账户 ${toAccount}`);
        } else {
            alert('转账失败: ' + (data.error || '未知错误'));
        }
    })
   .catch(error => {
        console.error('Error:', error);
        alert('转账成功！');
    });
});
>>>>>>> 67cb948 (前端页面1.2)
    </script>
</body>
</html>